{% extends 'base.html' %}
{% load static %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'datatables/dataTables.bootstrap4.min.css' %}">
{% endblock %}

{% block content %}
  {% include 'classroom/_guest_header.html' with active='quizzes' %}
  
  <table class="table table-bordered mb-0" id="tb_quizlist" >
    <thead>
      <tr>
        <th>测验</th>
        <th class="d-none d-sm-table-cell">主题</th>
        <th class="d-none d-sm-table-cell">问题数</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for quiz in quizzes %}
        <tr{% if quiz.subject.id in student_subjects %} style="background: #fdf7e3"{%endif%}>
          <td class="align-middle">{{ quiz.name }}</td>
          <td class="align-middle d-none d-sm-table-cell">{{ quiz.subject.get_html_badge }}</td>
          <td class="align-middle d-none d-sm-table-cell">{{ quiz.questions_count }}</td>
          <td class="text-right" data-orderable="false">
            <a href="{% url 'students:take_quiz' quiz.pk %}" class="btn btn-primary">开始测试</a>
          </td>
        </tr>
      {% empty %}
        <tr>
          <td class="bg-light text-center font-italic" colspan="4">No quiz matching your interests right now.</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

{% block js %}
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'datatables/dataTables.bootstrap4.min.js' %}"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#tb_quizlist').DataTable({"order": [[ 2, "desc" ]]});
});
</script>
{% endblock %}